{% extends 'layout.html' %}
{% load static %}
{% load permission %}
{% block content %}
    {% if search_group_row_list %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-filter" aria-hidden="true"></i> 快速筛选
                <div class="fold-button pull-right">
                    <span class="open_panel" style="display: none;cursor: pointer;">展开</span>
                    <span class="close_panel" style="cursor: pointer;">收起</span>
                </div>
            </div>
            <div class="panel-body fold-box">
                <div class="search-group card card-body">
                    {% for row in search_group_row_list %}
                        <div class="row">
                            {% for obj in row %}
                                {{ obj|safe }}
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}
    <div style="margin-bottom: 10px;" class="right">
        <form class="form-inline" method="get">
            <div class="form-group">
                <input name="keyword" type="text" class="form-control" placeholder="请输入关键字" value="{{ keyword }}">
            </div>
            <button type="submit" class="btn btn-primary">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </form>

    </div>
    <table class="table table-bordered table-hover table-striped">
        <thead class="root">
        <tr>
            <th>序号</th>
            {% for item in header_list %}
                <th>{{ item }}</th>
            {% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for row in body_list %}
            <tr>
                <td>{{ forloop.counter }}</td>
                {% for ele in row %}
                    <td>{{ ele }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <ul class="pagination">
        {{ pager.html }}
    </ul>


{% endblock %}

{% block js %}
    <script src="{% static 'plugins/highcharts/highcharts.js' %}"></script>
    <script src="{% static 'js/line_chart.js' %}"></script>
    <script>
        var CHART_TITLE = "请求数量统计";
        var API_URL = "{% url 'botgate_account_chart' %}";
        $(function () {
            initChart();
            $(".fold-button").click(function () {
                $(".fold-box").slideToggle("normal");
                $(".open_panel").toggle();
                $(".close_panel").toggle();
            });
        });
    </script>
{% endblock %}